import React, { useState } from 'react';
import '../../style/artist.css';
import ZJL from '../../img/singer/ZJL.jpg';
import Easen from '../../img/singer/Easen.jpg';
import Rose from '../../img/singer/Rose.jpg';
import XZQ from '../../img/singer/XZQ.jpg';
import JJ from '../../img/singer/JJ.jpg';
import WLH from '../../img/singer/WLH.jpg';

const singerNames = [
    "周杰伦", "陈奕迅", "ROSÉ", "薛之谦", "林俊杰", "王力宏",
    "汪苏泷", "G.E.M. 邓紫棋", "周深", "王源", "陶喆", "许嵩",
    "李荣浩", "方大同", "刘德华", "张学友", "郑秀文", "李克勤"
];


const artists = [
    { name: "周杰伦", imgSrc: ZJL },
    { name: "陈奕迅", imgSrc: Easen },
    { name: "ROSÉ", imgSrc: Rose },
    { name: "薛之谦", imgSrc: XZQ },
    { name: "林俊杰", imgSrc: JJ },
    { name: "王力宏", imgSrc: WLH }
];

// 单个歌手信息
const ArtistItem = ({ artist }) => (
    <div className="artist-card">
        <img src={artist.imgSrc} alt={artist.name} />
        <p>{artist.name}</p>
    </div>
);

// 可见歌手列表
const ArtistsVisibleList = () => (
    <div className="artists-list">
        {artists.map(artist => (
            <ArtistItem key={artist.name} artist={artist} />
        ))}
    </div>
);

// 隐藏歌手名字列表
const ArtistsInvisibleList = () => (
    <div className="artists-list_invisible">
        {singerNames.map(name => (
            <p key={name} className="artist-name">{name}</p>
        ))}
    </div>
);

// 导航栏
const Navigation = ({ options, selectedOption, onClickHandler }) => (
    <nav>
        {options.map(option => (
            <div
                key={option.label}
                className={`nav-item ${selectedOption === option.value ? 'selected' : ''}`}
                onClick={() => onClickHandler(option.value)}
            >
                {option.label}
            </div>
        ))}
    </nav>
);

// 主组件
const Artists = () => {
    const [selectedCountry, setSelectedCountry] = useState('AllCountry');
    const [selectedGender, setSelectedGender] = useState('AllSex');
    const [selectedAlphabet, setSelectedAlphabet] = useState('AllAlphabet');

    const countryOptions = [
        { label: '全部', value: 'AllCountry' },
        { label: '内地', value: 'China' },
        { label: '港台', value: 'HongKong' },
        { label: '欧美', value: 'America' },
        { label: '日本', value: 'Japan' },
        { label: '韩国', value: 'Korea' }
    ];

    const genderOptions = [
        { label: '全部', value: 'AllSex' },
        { label: '男', value: 'Male' },
        { label: '女', value: 'Female' },
        { label: '组合', value: 'Group' }
    ];

    const alphabetOptions = [
        { label: '全部', value: 'AllAlphabet' }, // Add "全部" option
        ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('').map(letter => ({
            label: letter,
            value: letter
        }))
    ];


    const handleCountryClick = country => {
        setSelectedCountry(country);
    };

    const handleGenderClick = gender => {
        setSelectedGender(gender);
    };

    const handleAlphabetClick = letter => {
        setSelectedAlphabet(letter);
    };

    return (
        <div className="artists">
            {/* 国家导航栏 */}
            <Navigation
                options={countryOptions}
                selectedOption={selectedCountry}
                onClickHandler={handleCountryClick}
            />

            {/* 性别或类型导航栏 */}
            <Navigation
                options={genderOptions}
                selectedOption={selectedGender}
                onClickHandler={handleGenderClick}
            />

            {/* 字母导航栏 */}
            <Navigation
                options={alphabetOptions}
                selectedOption={selectedAlphabet}
                onClickHandler={handleAlphabetClick}
            />

            <div className="artist-container">
                <ArtistsVisibleList />
                <ArtistsInvisibleList />
            </div>
        </div>

    );
};

export default Artists;
